<template>
  <div style="display: flex;flex-direction: column">
    <!-- 头部区域 -->
    <div style="height: 60px; background-color: #409EFF; width: 100%; display: flex; align-items: center;">
      <span style="font-size: 20px; color: white; height: 100%; display: flex; align-items: center; margin-left: 20px;">欢迎使用</span>
      <div style="flex: 1"></div>
      <div style="height: 100%; display: flex; align-items: center; margin-right: 20px;">
        <span style="font-size: 16px; color: white; margin-right: 10px;">1551</span>
        <img src="https://tse3-mm.cn.bing.net/th/id/OIP-C.m1kTzREr_mh9OeTjbLqTkwHaHa?w=192&h=192&c=7&r=0&o=7&pid=1.7&rm=3"
             style="width: 40px; height: 40px; border-radius: 50%;">
      </div>
    </div>
    <!-- 头部区域结束 -->
    <!-- 内容区域 -->
    <div style="width: 100vw;height: calc(100vh - 60px);display: flex">
      <!-- 主页布局 -->
      <el-menu
          style="width: 200px;height: 100%"
          class="el-menu-vertical-demo"
          router
          :default-active="activeMenu"
      >
        <el-menu-item index="/manager">
          系统首页
        </el-menu-item>
        <el-menu-item index="/manager/home">
          信息管理
        </el-menu-item>
        <el-menu-item index="/manager/book">
          图书管理
        </el-menu-item>
        <el-sub-menu>
          <template #title>
            <el-icon><Location /></el-icon>
            <span>信息分类</span>
          </template>
          <el-menu-item index="/manager/book">学生列表</el-menu-item>
          <el-menu-item index="/manager/info">教师列表</el-menu-item>
        </el-sub-menu>
      </el-menu>

      <!-- 右侧内容区域 -->
      <div style="color:palegoldenrod;height: 100%;flex: 1">
        <RouterView></RouterView>
      </div>
    </div>
  </div>
</template>

<script setup>
//路由管理
import { useRoute } from 'vue-router'
import { computed } from "vue"
import { Location } from '@element-plus/icons-vue'

const route = useRoute()
const activeMenu = computed(() => {
  return route.path
})
</script>

<style scoped>

</style>